<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <!-- <el-select class="handle-input mr10" v-model="search.kindId" placeholder="交易内容" @change="handleSearch()">
          <el-option v-for="item in kindList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select> -->
        <span class="mr10">
          <el-date-picker v-model="time" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </span>
        <el-select class="handle-input mr10" v-model="statusNum" placeholder="状态" clearable>
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="search.user" placeholder="登录用户" class="handle-input mr10" width="55"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-lx-friendadd" @click="showExport = true">导出</el-button>
        <el-button type="primary" @click="reload()">刷新页面</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="mobile" label="登录用户"></el-table-column>
        <el-table-column prop="deductMoney" label="已扣手续费"></el-table-column>
        <el-table-column prop="rechargeMoney" label="实充金额"></el-table-column>
        <el-table-column prop="remarks" label="转交易对象(备注)"></el-table-column>

        <el-table-column label="充值凭证">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.proof" @click="open(scope.row.proof)"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="充值凭证1">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.proof1" @click="open(scope.row.proof1)"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="充值凭证2">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.proof2" @click="open(scope.row.proof2)"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="类别">
          <template #default="scope">
            <el-tag v-if="scope.row.statement == '1'">支付宝</el-tag>
            <el-tag v-else-if="scope.row.statement == '2'">微信</el-tag>
            <el-tag v-else-if="scope.row.statement == '3'">银行卡</el-tag>
            <el-tag v-else>链地址</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == '0'">未审核</el-tag>
            <el-tag v-else-if="scope.row.status == '1'">已通过</el-tag>
            <el-tag v-else>已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="statusRemarks" label="审核备注(拒绝理由)"></el-table-column>
        <el-table-column prop="auditTime" label="审核时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.status == '0'" type="text"
              @click="handlePass(scope.$index, scope.row)">通过审核</el-button>
            <el-button v-if="scope.row.status == '0'" class="red" type="text"
              @click="handleRefuse(scope.$index, scope.row)">拒绝兑换</el-button>
            <el-tag v-else-if="scope.row.status == '1'">已通过</el-tag>
            <el-tag v-else>已拒绝</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 导出框 -->
    <el-dialog title="创建用户" v-model="showExport" width="40%">
      <el-form ref="form" :model="eList" label-width="100px">
        <el-form-item label="创建时间范围">
          <el-date-picker v-model="etime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取 消</el-button>
          <el-button type="primary" @click="fundExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { api, apiEx } from "../../../api/index";
import { formatDate } from "../../../common/data";
import moment from "moment";
export default {
  inject: ["reload"],
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  name: "basetable",
  data() {
    return {
      query: {
        pageNo: 1,
      },
      kindList: [],
      search: {
        user: "",
        kindId: 1,
      },
      time: "",
      etime: "",
      tableData: [],
      showAddUser: false,
      showExport: false,
      pageTotal: 0,
      list: {},
      eList: {},
      isChange: "",
      data: "",
      status: [
        {
          value: 0,
          label: "未审核",
        },
        {
          value: 1,
          label: "已通过",
        },
        {
          value: 2,
          label: "已拒绝",
        },
      ],
      statusNum: "",
    };
  },
  created() {
    // this.getKindList()
    this.getData();
  },
  mounted() { },
  methods: {
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // getKindList() {
    //   api('/web/daKind/s').then((res) => {
    //     this.kindList = res.data
    //     this.search.kindId = res.data[0].id
    //   });
    // },

    // 获取分类列表
    getData() {
      if (this.time) {
        var endTime = formatDate(new Date(this.time[1]), "yyyy-MM-dd hh:mm:ss");
        var startTime = formatDate(new Date(this.time[0]), "yyyy-MM-dd hh:mm:ss");
      }
      api('/web/fund/list', {
        mobile: this.search.user,
        limit: 10,
        offset: this.query.pageNo,
        endTime: endTime == "NaN-aN-aN aN:aN:aN" ? "" : endTime,
        startTime: startTime == "NaN-aN-aN aN:aN:aN" ? "" : startTime,
        status: this.statusNum,
        kindId: this.search.kindId,
      }).then((res) => {
        // console.log(res.data);
        this.tableData = res.data.rows;
        this.pageTotal = res.data.total;
      });
    },


    open(url) {
      this.$alert('<img class="bigwxpic" src="' + url + '" alt="">', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
      });
    },
    // 导出
    fundExport() {
      this.showExport = false;
      this.eList.startTime = formatDate(new Date(this.etime[0]), "yyyy-MM-dd");
      this.eList.endTime = formatDate(new Date(this.etime[1]), "yyyy-MM-dd");
      this.eList.mobile = "";
      this.eList.kindId = this.search.kindId
      apiEx('/web/fund/export', this.eList).then((res) => {
        const blob = new Blob([res]); // 创建blob对象
        console.log(blob);
        const fileName = "充值记录.xlsx";
        const elink = document.createElement("a"); // 创建的标签
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob); // 创建url
        document.body.appendChild(elink); // 把 创建的标签追加到body里
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 移除标签
        this.$message({
          message: "导出成功！！！",
          type: "success",
        });
        this.$refs.multipleTable.clearSelection();
      });
    },

    // 触发搜索按钮
    handleSearch() {
      this.query.pageNo = 1
      this.getData();
    },
    // 通过审核
    handlePass(index, row) {
      // 二次确认删除
      let data = JSON.parse(JSON.stringify(row));
      this.$confirm("提示", "确定通过此用户的兑换申请？", {
        distinguishCancelAndClose: true,
        confirmButtonText: "通过审核",
        cancelButtonText: "取消",
      }).then(() => {
        api('/web/fund/verify', {
          id: data.id,
          status: 1,
          kindId: this.search.kindId,
          statusRemarks: "",
        }).then((res) => {
          if (res.code === 2000) {
            this.$message.success(res.message);
            this.reload();
          } else {
            this.$message.error(res.message);
          }
        });
      })
    },
    handleRefuse(index, row) {
      let data = JSON.parse(JSON.stringify(row));
      this.$prompt("(拒绝理由)", "确定拒绝此用户的兑换申请 ！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        api('/web/fund/verify', {
          id: data.id,
          status: 2,
          kindId: this.search.kindId,
          statusRemarks: value ? value : "",
        }).then((res) => {
          if (res.code === 2000) {
            this.$message.success(res.message);
            this.reload();
          } else {
            this.$message.error(res.message);
          }
        });
      })
      return;
    },

    // 分页导航
    handlePageChange(val) {
      // console.log(val);
      this.query.pageNo = val;
      this.getData();
    },
  },
};
</script>

<style lang='scss' scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
<style>
.bigwxpic {
  width: 100%;
}
</style>
